<template>
  <div class="info_main mt-5 ml-5">
    <!--    搜素框  -->
    <div class="row" >
      <div class="col-md-2">
        <!--        <el-button @click="toggleSelection()">取消选择</el-button>-->
        <el-select v-model="fiter_check" placeholder="选择审核情况..." @change="changecheck">
          <el-option label="审核通过" value="1"></el-option>
          <el-option label="审核不通过" value="2"></el-option>
          <el-option label="未审核" value="0"></el-option>
        </el-select>
      </div>
      <div class="col-md-8">
        <el-input  type="text"
                   v-model="findName"
                   style="width: 500px;"
                   placeholder="请输入用户名..."
                   clearable
                   @keyup.enter.native="searchByName">
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchByName()" class="ml-3" plain>搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="clearFindInput()" class="ml-3">重置</el-button>
      </div>
      <!--      添加按钮-->
      <div class="col-md-1" align="right">
        <!--        <el-button type="primary" @click="addOpen()" plain><i class="el-icon-plus" ></i>添加</el-button>-->
      </div>
    </div>
    <!--      批量审核、删除按钮-->
    <div class="mt-3">
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-button type="danger" @click="handleMultipleDelete">批量删除</el-button>
      <el-button type="warning" @click="handleMultipleCheck">批量审核</el-button>
    </div>
    <div class="show_data mt-4">
      <el-table
          ref="multipleTable"
          v-horizontal-scroll="'always'"
          show-overflow-tooltip
          :data="showData"
          style="width: 100%"
          :cell-style="{color: '#666', fontFamily: 'Arial',fontSize:'17px'}"
          :header-cell-style="{background:'whitesmoke', fontFamily:'Helvetica',fontSize:'20px'}"
          height="700"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            fixed
            prop="register_time"
            sortable
            label="注册时间"
            width="220">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.register_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="user_name"
            label="用户名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="ifcheck"
            label="审核情况"
            width="150"
            column-key="ifcheck">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.ifcheck==1" disable-transitions type="success">
              <span class="typeClass">审核通过</span>
            </el-tag>
            <el-tag v-else-if="scope.row.ifcheck==2" disable-transitions type="danger">
              <span class="typeClass">审核不通过</span>
            </el-tag>
            <el-tag v-else-if="scope.row.ifcheck==0" disable-transitions type="primary">
              <span class="typeClass">未审核</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="identity"
            label="身份"
            width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.identity==1" disable-transitions type="success">
              <span class="typeClass">学长学姐</span>
            </el-tag>
            <el-tag v-else-if="scope.row.identity==2" disable-transitions type="danger">
              <span class="typeClass">老师</span>
            </el-tag>
            <el-tag v-else-if="scope.row.identity==0" disable-transitions type="primary">
              <span class="typeClass">学生</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="true_name"
            label="真实姓名"
            width="130">
        </el-table-column>
        <el-table-column
            prop="sno"
            label="学号"
            width="130">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="真实姓名：">
                <span>{{ props.row.true_name }}</span>
              </el-form-item>
              <el-form-item label="院系：">
                <span>{{ props.row.faculty }}</span>
              </el-form-item>
              <el-form-item label="专业：" v-show="props.row.identity == 0 || props.row.identity  == 1">
                <span>{{ props.row.subject }}</span>
              </el-form-item>
              <el-form-item label="年级：" v-show="props.row.identity  == 0 || props.row.identity  == 1">
                <span>{{ props.row.grade }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="230">
          <template slot-scope="scope">
            <el-button
                type="warning"
                size="mini"
                @click="check(scope.$index, scope.row)">
              <span class="btnfontClass" >审核</span>
            </el-button>
            <el-button
                size="mini"
                @click="edit(scope.$index, scope.row)">
              <span class="btnfontClass" >编辑</span>
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">
              <span class="btnfontClass" >删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div class="pagin mt-5 mb-5">
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="userContainerPage"
            :page-size="userContainerSize"
            layout="total,prev, pager, next"
            :total=total>
        </el-pagination>
      </div>

      <!--编辑弹窗-->
      <el-dialog
          title="编辑用户身份信息"
          :visible.sync="editdialogVisible"
          width="45%"
          @close="handleCloseEdit">

        <!--        编辑表单-->
        <el-form ref="PersonIdentity" :model="PersonIdentity" label-width="100px" :before-close="closeDivEdit">

          <form>
            <!--          身份验证信息-->
            <div class="form-group">
              <label for="inputIfcheck">身份审核情况</label>
              <input type="email" class="form-control " id="inputIfcheck" v-model="PersonIdentity.ifcheck" readonly="readonly">
            </div>
            <div class="form-row">
              <div class="form-group col-md-4">
                <label for="inputIdentity">身份</label>
                <select id="inputIdentity" class="form-control" v-model="PersonIdentity.identity" >
                  <option value="-1" disabled selected hidden>请选择</option>
                  <option value="0" style="color: black;">学生</option>
                  <option value="1" style="color: black;">已毕业的学长学姐</option>
                  <option value="2" style="color: black;">老师</option>
                </select>
              </div>
              <div class="form-group col-md-4">
                <label for="inputSno">学号/教师编号</label>
                <input type="text" class="form-control" id="inputSno" v-model="PersonIdentity.sno" >
              </div>
              <div class="form-group col-md-4">
                <label for="inputTrueName">真实姓名</label>
                <input type="text" class="form-control" id="inputTrueName" v-model="PersonIdentity.true_name">
              </div>
            </div>
            <div class="form-group">
              <label for="inputFaculty">院系</label>
              <select id="inputFaculty" class="form-control" v-model="PersonIdentity.faculty">
                <option selected>信息科学与技术学院</option>
                <option>人文与传播学院</option>
                <option>法学院</option>
                <option>英语语言文化学院</option>
                <option>日本语言与文化学院</option>
                <option>设计与创意学院</option>
                <option>音乐系</option>
                <option>国际商务学院</option>
                <option>会计与金融学院</option>
                <option>管理学院</option>
                <option>机电工程学院</option>
                <option>土木工程学院</option>
                <option>建筑学院</option>
                <option>环境科学与工程学院</option>
              </select>
            </div>
            <div class="form-row" v-show="identity_num == 0 || identity_num == 1">
              <div class="form-group col-md-6">
                <label for="inputGrade">年级</label>
                <input type="text" class="form-control" id="inputGrade" v-model="PersonIdentity.grade">
              </div>
              <div class="form-group col-md-6">
                <label for="inputSubject">专业班级</label>
                <input type="text" class="form-control" id="inputSubject" v-model="PersonIdentity.subject">
              </div>
            </div>
          </form>

        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSave()">修 改</el-button>
          <el-button @click="openCancelEdit">取 消</el-button>
        </span>
      </el-dialog>


      <!--审核情况-->
      <el-dialog title="审 核 情 况" :visible.sync="checkdialogFormVisible" width="30%">
        <el-form :model="checkform">
          <el-form-item label="审核情况：" :label-width="formLabelWidth">
            <el-select v-model="checkform.check" placeholder="审核情况...">
              <el-option label="通过审核" value="1"></el-option>
              <el-option label="不通过审核" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCheck">确 定</el-button>
          <el-button @click="checkdialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!--      批量审核-->
      <el-dialog title="审 核 情 况" :visible.sync="mulipleCheckdialogFormVisible" width="30%">
        <el-form :model="mulipleIdle">
          <el-form-item label="审核情况：" :label-width="formLabelWidth">
            <el-select v-model="mulipleIdle.multipleCheck" placeholder="审核情况...">
              <el-option label="通过审核" value="1"></el-option>
              <el-option label="不通过审核" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="mulipleCheckdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitMulipleCheck">确 定</el-button>
        </div>
      </el-dialog>



    </div>
  </div>
</template>

<script>
import {getAllUserInfo, updateUserIdentityByAdmin, updateCheckByUserId, deleteUserByUserID,deleteMutipleUser} from "@/api/User";


export default {
  name: "information_main",
  data() {
    return {
      //筛选相关
      fiter_check:'',
      //搜索相关功能
      findName:'',
      userContainerPage:0, // 分页的数据：当前页数
      userContainerSize:0, // 分页的数据：每页的数量
      total:0,
      UserData: [],
      showData:[],
      copyData:[],
      search_info:[],  //存放搜索到的容器
      //  编辑功能相关
      editdialogVisible:false,
      PersonIdentity:{
        user_id:'',
        ifcheck:'',
        identity:'',
        sno:'',
        true_name:'',
        faculty:'',
        grade:'',
        subject:'',

      },
      formLabelWidth: '100px',
      //审核弹窗相关
      checkdialogFormVisible:false,
      checkform:{
        check:'',

      },
      user_id_check:'',
      identity_num:'',//判断是否显示年级班级
      //  批量审核
      multipleSelection: [],
      mulipleIdle:{
        multipleCheck:'',
      },
      mulipleCheckdialogFormVisible:false,




    }
  },

  methods: {
    //获取全部用户个人基本信息
    init(){
      getAllUserInfo({}).then(res=>{
        this.UserData=res.data;
        this.copyData=res.data;
        this.getShowUser();
      })
    },
    getShowUser(){
      this.userContainerSize=parseInt(10);
      this.showData = this.UserData.slice((this.userContainerPage - 1) * this.userContainerSize, this.userContainerPage * this.userContainerSize);
      this.total=parseInt(this.UserData.length);
    },
    //根据管理员名进行搜索
    searchByName(){
      var search=this.findName;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        this.init();
      }
      else {
        //执行本地过滤
        var search_list=this.copyData;
        this.search_info=[];  //装搜索结果的容器
        for(let i=0;i<search_list.length;i++)
        {
          if(search_list[i].user_name.indexOf(search)>=0)
          {
            this.search_info.push(search_list[i]);
          }
        }
        if(this.search_info.length==0)
        {
          this.$msg.error('未找到相关结果,刷新一下~');
        }
        this.UserData=this.search_info;
        //分页
        this.userContainerPage=parseInt(1);
        this.getShowUser();

        //清空搜索框
        this.findName="";
      }

    },
    //  数据筛选
    changecheck(){
      var search=this.fiter_check;
      //执行本地过滤
      var search_list=this.copyData;
      this.search_info=[];  //装搜索结果的容器
      for(let i=0;i<search_list.length;i++)
      {
        if(search_list[i].ifcheck==search)
        {
          this.search_info.push(search_list[i]);
        }
      }
      if(this.search_info.length==0)
      {
        this.$msg.error('未找到相关结果,刷新一下~');
      }
      this.UserData=this.search_info;
      //分页
      this.userContainerPage=parseInt(1);
      this.getShowUser();


    },
    //分页
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.userContainerPage= parseInt(val);
      this.getShowUser();
    },
    //编辑管理员信息  打开编辑弹窗
    edit(index, row) {

      this.editdialogVisible=true;

      this.PersonIdentity.identity=row.identity;
      this.PersonIdentity.sno=row.sno;
      this.PersonIdentity.user_id=row.user_id;
      this.PersonIdentity.true_name=row.true_name;
      this.PersonIdentity.faculty=row.faculty;
      this.PersonIdentity.grade=row.grade;
      this.PersonIdentity.subject=row.subject;
      this.identity_num=row.identity;

      if(row.ifcheck==0) {
        this.PersonIdentity.ifcheck='未审核';
      } else if(row.ifcheck== 2){
        this.PersonIdentity.ifcheck='审核不通过';
      }else if(row.ifcheck== 1){
        this.PersonIdentity.ifcheck='审核已通过';
      }

    },
    //提交数据 修改
    editSave()
    {
      //再次确认
      this.$confirm('确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateSave();
      }).catch(() => {
        this.$msg.error("修改失败！");
      });

    },
    //连接后端  进行修改
    updateSave(){

      if(this.PersonIdentity.identity==null){
        this.$msg.warning('请选择身份！');
        return false;
      }
      if(this.PersonIdentity.sno==null){
        this.$msg.warning('请输入学号或教师编号！');
        return false;
      }
      if(this.PersonIdentity.true_name==null){
        this.$msg.warning('请输入真实姓名！');
        return false;
      }
      if(this.PersonIdentity.faculty==null){
        this.$msg.warning('请选择院系！');
        return false;
      }
      if(this.PersonIdentity.identity==1 || this.PersonIdentity.identity==0){
        if(this.PersonIdentity.grade==null){
          this.$msg.warning('请输入年级！');
          return false;
        }
        if(this.PersonIdentity.subject==null){
          this.$msg.warning('请输入专业班级！');
          return false;
        }
      }

      updateUserIdentityByAdmin({
        PersonIdentity:this.PersonIdentity,
        user_id:this.PersonIdentity.user_id
      }).then(res=>{
        //审核情况变为审核通过
        if(res.data.result==1){
          this.$msg.success('更新成功，自动通过审核！');
          this.editdialogVisible=false;
          this.init();
        }
        else{
          this.$msg.error('更新失败！');
        }
      })


    },
    //审核
    check(index, row){
      this.checkdialogFormVisible=true; //打开弹窗
      this.user_id_check=row.user_id;
    },
    submitCheck(){

      if(this.checkform.check.length==0){
        this.$msg.warning("请选择！");
        return false;
      }

      this.checkSave(this.user_id_check,this.checkform.check)

    },
    //修改审核情况
    checkSave(user_id,user_id_check){
      updateCheckByUserId({
        user_id_check: user_id_check,
        user_id:user_id
      }).then(res=>{
        if(res.data.code===1)
        {
          this.$msg.success("修改成功！");
          //刷新表格数据
        }
        else
        {
          this.$msg.error("修改失败！");
        }
        this.checkdialogFormVisible=false;
        this.init();
      });

    },
    //删除
    handleDelete(index, row) {
      //再次确认
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSave(row.user_id);
      }).catch(() => {
        this.$msg.error("取消删除！");
      });

    },
    //连接后端，进行删除
    deleteSave(user_id){
      deleteUserByUserID({
        user_id:user_id
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success("删除成功！");
        }else{
          this.$msg.error("删除失败！");
        }
        this.init();
      });

    },
    //  关闭弹窗
    openCancelEdit(){
      this.editdialogVisible = false
      // 点击取消按钮的时候清除输入框中的内容 清除验证
      //  this.$nextTick获取了节点之后进行操作
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["PersonIdentity"].resetFields();
      });
    },
    // 右上角 × 取消按钮
    closeDivEdit(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["PersonIdentity"].resetFields();
      });
    },
    //清空搜索框
    clearFindInput(){
      this.findName="";
      this.fiter_check="";
      this.init();
    },
    handleCloseEdit(){
      this.$nextTick(() => {
        // form对应你写的<el-form ref="form"></el-form>
        this.$refs["PersonIdentity"].resetFields();
      });
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //  批量审核
    handleMultipleCheck(rows){

      if (this.multipleSelection == '') {
        this.$message.error('您未选中任何用户，请重新操作！！！');
        return;
      }

      this.mulipleCheckdialogFormVisible=true;
    },
    submitMulipleCheck(){

      let checkArr = this.multipleSelection;  // multipleSelection存储了勾选到的数据
      let user_ids = [];
      checkArr.forEach(function (item) {
        user_ids.push(item.user_id);
      });
      updateCheckByUserId({
        user_id_check: this.mulipleIdle.multipleCheck,
        user_id:user_ids,
      }).then(res=>{
        if(res.data.code===1)
        {
          this.$msg.success("批量审核成功！");
          //刷新表格数据
        }
        else
        {
          this.$msg.error("批量审核失败！");
        }
        this.mulipleCheckdialogFormVisible=false;
        this.init();
      })

    },
    //  批量删除
    handleMultipleDelete(){

      if (this.multipleSelection == '') {
        this.$message.error('您未选中任何用户，请重新操作！！！');
        return;
      }

      let checkArr = this.multipleSelection;  // multipleSelection存储了勾选到的数据
      let user_ids = [];
      checkArr.forEach(function (item) {
        user_ids.push(item.user_id);
      });

      //再次确认
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        deleteMutipleUser({
          user_id:user_ids,
        }).then(res=>{
          if(res.data.code==1){
            this.$msg.success("批量删除成功！");
          }else{
            this.$msg.error("删除失败！");
          }
          this.init();
        });

      }).catch(() => {
        this.$msg.error("取消删除！");
      });


    },

  },
  created() {
    let _this=this;
    _this.userContainerPage=parseInt(1);
    _this.init();
    _this.$refs.table.doLayout();

  },
}
</script>

<style scoped>
.btnfontClass{
  font-size: 15px;
}
.el-pagination {
  text-align: center;
}
.typeClass{
  font-size: 14px;
}
/*表格展开功能样式*/
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
